<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alfred CI/CD</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <div class="decorative-corner top-left"></div>
        <div class="decorative-corner top-right"></div>
        <div class="decorative-corner bottom-left"></div>
        <div class="decorative-corner bottom-right"></div>
        
        <header>
            <div class="avatar-group">
                <div class="avatar">🤖</div>
                <div class="title-group">
                    <h1>Alfred CI/CD</h1>
                    <p class="subtitle">您的智能持续集成管家</p>
                </div>
            </div>
        </header>
        
        <!-- Navigation Tabs -->
        <nav class="tab-navigation">
            <button class="tab-btn active" onclick="switchTab('flows')">工作流管理</button>
            <button class="tab-btn" onclick="switchTab('executions')">执行历史</button>
        </nav>
        
        <main class="main-content">
            <!-- Flows Panel -->
            <div id="flows-panel" class="panel-fullwidth active">
                <div class="panel-header">
                    <h2>工作流管理</h2>
                    <div class="controls">
                        <button class="primary-btn" onclick="createFlow()">创建工作流</button>
                        <button class="secondary-btn" onclick="refreshFlows()">刷新</button>
                    </div>
                </div>
                <div id="flows-list" class="builds-list">
                    <!-- Flows will be loaded here -->
                </div>
            </div>
            
            <!-- Executions Panel -->
            <div id="executions-panel" class="panel-fullwidth">
                <div class="panel-header">
                    <h2>执行历史</h2>
                    <div class="controls">
                        <button class="secondary-btn" onclick="refreshExecutions()">刷新</button>
                    </div>
                </div>
                <div id="executions-list" class="builds-list">
                    <!-- Executions will be loaded here -->
                </div>
            </div>
            
            <!-- Butler Message -->
            <div class="butler-message">
                <div class="butler-avatar">🎩</div>
                <div class="message-content">
                    <p id="butler-text">Alfred 已准备就绪，随时为您服务！</p>
                </div>
            </div>
        </main>
    </div>
    
    <!-- Flow Creation Modal -->
    <div id="flow-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <h3>创建新工作流</h3>
            <form id="flow-form">
                <div class="form-group">
                    <label for="flow-name">工作流名称:</label>
                    <input type="text" id="flow-name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="flow-repo">仓库URL:</label>
                    <input type="url" id="flow-repo" name="repo_url" required>
                </div>
                <div class="form-group">
                    <label for="flow-branch">分支:</label>
                    <input type="text" id="flow-branch" name="branch" value="main">
                </div>
                <div class="form-group">
                    <label for="flow-git-username">Git用户名 (可选):</label>
                    <input type="text" id="flow-git-username" name="git_username" placeholder="用于私有仓库访问">
                </div>
                <div class="form-group">
                    <label for="flow-git-token">Git访问令牌 (可选):</label>
                    <input type="password" id="flow-git-token" name="git_token" placeholder="Personal Access Token或密码">
                </div>
                <div class="form-group">
                    <label for="flow-description">描述:</label>
                    <textarea id="flow-description" name="description" rows="3"></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="primary-btn">创建</button>
                    <button type="button" class="secondary-btn" onclick="closeModal()">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Flow Details Modal -->
    <div id="flow-details-modal" class="modal" style="display: none;">
        <div class="modal-content large">
            <div class="modal-header">
                <h3 id="flow-details-title">工作流详情</h3>
                <button type="button" class="close-btn" onclick="closeFlowDetailsModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div id="flow-info" class="flow-info-section">
                    <!-- Flow basic info will be displayed here -->
                </div>
                <div class="nodes-section">
                    <div class="section-header">
                        <h4>节点管理</h4>
                        <button class="primary-btn" onclick="createNodeForFlow()">添加节点</button>
                    </div>
                    <div id="flow-nodes-list" class="nodes-list">
                        <!-- Nodes will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Node Details Modal -->
    <div id="node-details-modal" class="modal" style="display: none;">
        <div class="modal-content large">
            <div class="modal-header">
                <h3 id="node-details-title">节点详情</h3>
                <button type="button" class="close-btn" onclick="closeNodeDetailsModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div id="node-info" class="node-info-section">
                    <!-- Node basic info will be displayed here -->
                </div>
                <div class="actions-section">
                    <div class="section-header">
                        <h4>脚本代码</h4>
                        <div class="action-controls">
                            <select id="script-type" onchange="app.onScriptTypeChange()">
                                <option value="python">Python3</option>
                                <option value="shell">Shell</option>
                            </select>
                            <button class="primary-btn" onclick="app.saveNodeScript()">保存脚本</button>
                        </div>
                    </div>
                    <div class="script-editor">
                        <textarea id="script-content" placeholder="请输入脚本代码..." rows="15" style="width: 100%; font-family: 'Courier New', monospace; font-size: 14px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; resize: vertical;"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Node Creation Modal -->
    <div id="node-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>创建新节点</h3>
                <button type="button" class="close-btn" onclick="closeNodeModal()">&times;</button>
            </div>
            <form id="node-form">
                <div class="form-group">
                    <label for="node-name">节点名称:</label>
                    <input type="text" id="node-name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="node-description">描述:</label>
                    <textarea id="node-description" name="description" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="node-script-type">脚本类型:</label>
                    <select id="node-script-type" name="script_type">
                        <option value="python">Python3</option>
                        <option value="shell">Shell</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="node-script-content">脚本内容:</label>
                    <textarea id="node-script-content" name="script_content" rows="10" placeholder="请输入脚本代码..."></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="primary-btn">创建节点</button>
                    <button type="button" class="secondary-btn" onclick="closeNodeModal()">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <script src="/static/js/app.js"></script>
</body>
</html>